<template>
  <div class="hd-search">
    <div class="hd-search-nav">
      <span>{{ctitle}}</span>
     <router-link to="/search">
        <div class="search">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" placeholder="搜你想搜的" />
      </div>
     </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name:"compHdsearch",
  props:{
    ctitle:{
      type:String,
    }
  }
}
</script>

<style lang="scss" scoped>
.hd-search {
   z-index: 99;
  width: 100%;
  height: 46px;
  background: #7ab4ff;
   position: fixed;
  left: 0;
  top: 0;
  .hd-search-nav {
    width: 344px;
    height: 46px;
    line-height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    span {
      font-size: 18px;
      color: #fff;
    }
    .search {
      width: 296px;
      height: 36px;
      line-height: 36px;
      border-radius: 20px;
      background: #fff;
      //   display: inline-block;
      display: flex;
      i {
        font-size: 24px;
        margin-left: 15px;
        color: #ccc;
      }
      input {
        height: 36px;
        width: 247px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        margin-left: 10px;
        vertical-align: middle;
        padding: 0;
        box-shadow: none;
        /*聚焦input的蓝色边框*/
        outline: none;
        /*textarea 禁止拖拽*/
        resize: none;
        /*去除边框*/
        border: none;
        color: #ccc;
      //   &:-webkit-input-placeholder{
      //      color: #7ab4ff !important;
      //   }
        &:focus {
          // border: 0;
          border-color: rgb(255, 255, 255);
          
        }
        
      }
    }
  }
}
</style>